import React, { useState } from "react";
import "./TodoHeader.css";
import Swal from "sweetalert2";

export default function TodoHeader({ addTodo }) {
  //定义文本框值的状态
  let [v, setV] = useState("");
  //声明 onChange 的事件回调
  let changeHandler = (e) => setV(e.target.value);
  return (
    <div className="todo-header">
      {/* 使用状态值作为 input 的 value 值 */}
      <input
        type="text"
        placeholder="请输入你的任务名称，按回车键确认"
        value={v}
        onChange={changeHandler}
        onKeyUp={async (e) => {
          //判断按下的是否为回车键
          if (e.code === "Enter") {
            //判断如果没有输入内容, 则直接返回
            if (v === "") return;
            try {
              //输出文本框中输入的值
              await addTodo(v);
              //清空文本框
              setV("");
              //提示
              Swal.fire({
                title: "操作成功",
                text: "您的操作已成功完成！",
                icon: "success",
                timer: 1000,
                confirmButtonText: "确认",
              });
            } catch (e) {
              Swal.fire({
                title: "添加失败",
                text: "您的操作已失败！",
                icon: "error",
                timer: 1000,
                confirmButtonText: "确认",
              });
            }
          }
        }}
      />
    </div>
  );
}
